<!--
 * @Descripttion: 
 * @version: 
 * @Author: 付正生
 * @Date: 2022-06-15 14:07:35
 * @LastEditors: Andy
 * @LastEditTime: 2022-06-16 16:30:39
-->
<template>
  <div class="wrap">
    <Navbar :appTitle="title" />
    <div class="tips">
      <div>建议补充采购数量{{ showNumText(detailData.num) }}{{ detailData.unitText || '--' }}</div>
      <div>净需求{{ showNumText(detailData.netRequirementNum) }}{{ detailData.unitText || '--' }}，采购中{{ showNumText(detailData.beingPurchaseTaskTotalNum) }}{{ detailData.unitText || '--' }}，待采购{{ showNumText(detailData.notPurchaseTaskTotalNum) }}{{ detailData.unitText || '--' }}</div>
    </div>
    <div>
      <div class="box" style="margin:0">
        <div class="body">
          <div>
            <p class="titles">
              <span style="color: #f25643">*</span>采购数量（片）
            </p>
            <van-field placeholder="请输入" v-model="formData.num" @input="inputNum">
              <span slot="right-icon" @click.stop="aotuInput">自动填充</span>
            </van-field>
          </div>
        </div>
      </div>
      <div style="height: 1rem; background: #f5f5f5"></div>
    </div>

    <div class="subimtForm">
      <van-button
        class="button"
        :loading="loading"
        type="info"
        @click="subimtForm"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { shopPurchaseSubmit } from '@/api/system'
import { getAction } from "@/api/manage";
import { clearNoNum } from '@/utils/util'
export default {
  components: { Navbar },
  data() {
    return {
      title: this.$route.meta.title,
      detailData: {},
      formData: {
        goodsId: '',
        num: ''
      },
      loading: false,
    };
  },
  computed: {},
  mounted() {},
  created() {
    getAction("/planmgt/erpProductMaterialRequirement/summaryInfo", {
      goodsId: this.$route.query.goodsId,
    }).then((res) => {
      console.log(res, "详情");
      this.detailData = res.result || {};
      if (!!this.detailData.netRequirementNum || this.detailData.netRequirementNum === 0) {
        let nets = this.detailData.netRequirementNum ? Number(this.detailData.netRequirementNum) : 0
        let begings = this.detailData.beingPurchaseTaskTotalNum ? Number(this.detailData.beingPurchaseTaskTotalNum) : 0
        let nots = this.detailData.notPurchaseTaskTotalNum ? Number(this.detailData.notPurchaseTaskTotalNum) : 0
        let totle = nets - begings - nots
        if (totle >= 0) {
          this.detailData.num = totle.toFixed(4)
        } else {
          this.detailData.num = 0
        }
      } else {
        this.detailData.num = 0
      }
      this.formData.goodsId = this.detailData.goodsId
    });
  },
  methods: {
    showNumText(v) {
      if (!!v || v === 0) {
        return v
      } else {
        return '--'
      }
    },
    inputNum(e) {
      this.formData.num = clearNoNum(e)
    },
    aotuInput() {
      console.log(this.detailData);
      this.formData.num = this.detailData.num
    },
    subimtForm() {
      this.loading = true
      if (!!this.formData.num) {
        shopPurchaseSubmit([this.formData]).then(res => {
          if (res.code == 200) {
            this.$toast(res.message)
            this.$router.go(-1)
          } else {
            this.$toast(res.message)
          }
        })
      } else {
        this.$toast('请填写采购数量')
        this.loading = false
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/detail.scss";
/deep/.van-field__right-icon {
  color: #1890ff
}
.subimtForm {
  height: 0.6rem;
  line-height: 0.5rem;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0px;
  .button {
    width: 94vw;
    height: 0.39rem;
    text-align: center;
    margin-left: 3vw;
  }
}
.tips {
  padding: 0.15rem;
  background: #FFEFE3;
  color: #FF943E;
  margin-top: 0.1rem;
  font-size: 0.11rem;
}
</style>